//引入样式
require("../../assets/fonts/iconfont.css");
require("../../assets/css/normalize.css");
require("../../assets/css/reset.css");
require("./mine_sports_data.less");

//引入模块
const dom = require("../../utils/dom");
const axios = require("../../utils/axios");
import * as echarts from "echarts";
document.addEventListener("DOMContentLoaded", async function () {
	// 点击返回上一页
	dom.get("#backBtn").addEventListener("click", function () {
		history.back();
	});
	// 头部数据渲染
	// 头像
	axios.get("/api/user/info").then((res) => {
		dom.get(".head img").src = axios.defaults.baseURL + "res.data.data.imgUrl";
	});
	// 运动数据/api/exercise
	let res = await axios.get("/api/exercise");
	console.log(res.data.data);
	let { days, sum7Calorie, sum7Duration, sum7Meter } = res.data.data;
	dom.get("#toldata").textContent = sum7Duration;
	dom.get("#calorie").textContent = sum7Calorie;
	dom.get("#meter").textContent = sum7Meter;
	dom.get("#total").textContent = days.length;
	dom.get("#continue").textContent = days.length;

	// 图表
	// 条型图x轴数据 data1
	let time = days.map((v) => {
		return v.date;
	});
	let data1 = time.map((v) => {
		return v.slice(5);
	});
	// 条型图y轴数据 data2
	let data2 = days.map((v) => {
		return v.sumDuration;
	});
	// 1条形图
	const myChart = echarts.init(dom.get(".chart1"));
	myChart.setOption({
		// 	tooltip: {},
		// 	xAxis: {
		// 		data: data1,
		// 	},
		// 	yAxis: {},
		// 	series: [
		// 		{
		// 			name: "销量",
		// 			type: "bar",
		// 			data: data2,
		// 		},
		// 	],
		title: {
			text: "近7天运动时长",
			left: 10,
			top: 10,
		},
		// 网格设置
		grid: {
			left: "15%",
			bottom: 30,
		},
		xAxis: {
			type: "category",
			data: data1,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				data: data2,
				type: "bar",
				showBackground: true,
				backgroundStyle: {
					color: "rgba(180, 180, 180, 0.2)",
				},
			},
		],
	});
	// 饼图
	// 饼图数据
	let num1 = 0; //跑步数据
	days.forEach((v) => {
		num1 += v.exerciseData[0].duration;
	});
	let num2 = 0; //跑步数据
	days.forEach((v) => {
		num2 += v.exerciseData[1].duration;
	});
	let num3 = 0; //跑步数据
	days.forEach((v) => {
		num3 += v.exerciseData[2].duration;
	});

	const myChart2 = echarts.init(dom.get(".chart2"));
	myChart2.setOption({
		title: {
			text: "运动分类",
			left: "center",
			left: 10,
			top: 10,
		},
		tooltip: {
			trigger: "item",
		},
		legend: {
			orient: "vertical",
			left: 20,
			top: 50,
		},
		// 网格设置
		grid: {
			left: "10%",
			bottom: 10,
		},

		series: [
			{
				name: "Access From",
				type: "pie",
				radius: "50%",
				data: [
					{
						value: num1,
						name: "跑步",
					},
					{
						value: num2,
						name: "骑行",
					},
					{
						value: num3,
						name: "训练",
					},
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: "rgba(0, 0, 0, 0.5)",
					},
				},
				label: {
					//显示在饼图中的文字标签
					position: "inside",
					formatter: "{d}%",
					color: "#fff",
					fontSize: 12,
				},
			},
		],
	});
	// 堆叠条形图
	let dataArr1 = days.map((v) => {
		return v.exerciseData[0].calorie;
	});
	let dataArr2 = days.map((v) => {
		return v.exerciseData[1].calorie;
	});
	let dataArr3 = days.map((v) => {
		return v.exerciseData[2].calorie;
	});
	const myChart3 = echarts.init(dom.get(".chart3"));
	myChart3.setOption({
		title: {
			text: "近七日运动消耗",
			left: 10,
			top: 10,
		},
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
			},
		},
		legend: {
			orient: "vertical",
			right: 5,
			top: 30,
		},
		grid: {
			left: 10,
			bottom: "3%",
			containLabel: true,
		},
		xAxis: {
			type: "value",
		},
		yAxis: {
			type: "category",
			data: data1,
		},
		series: [
			{
				name: "跑步",
				type: "bar",
				stack: "total",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: dataArr1,
			},
			{
				name: "骑行",
				type: "bar",
				stack: "total",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: dataArr2,
			},
			{
				name: "训练",
				type: "bar",
				stack: "total",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: dataArr3,
			},
		],
	});
	// 折线图
	let data4 = days.map((v) => {
		return v.count;
	});
	const myChart4 = echarts.init(dom.get(".chart4"));
	myChart4.setOption({
		title: {
			text: "近7天运动次数",
			left: 10,
			top: 10,
		},
		// // 网格设置
		// grid: {
		// 	left: "15%",
		// 	bottom: 30,
		// },
		xAxis: {
			type: "category",
			data: data1,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				data: data4,
				type: "line",
			},
		],
	});
});
